// src/app/workspace/[workspaceId]/layout.tsx
'use client';
import React from 'react';
import Toolbar from "@/app/social/workspace/[workspaceId]/_components/toolbar";
import Sidebar from "@/app/social/workspace/[workspaceId]/_components/sidebar";
import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from "@/components/ui/resizable";
import WorkspaceSidebar from "@/app/social/workspace/[workspaceId]/_components/workspace-sidebar";
import {usePanel} from "@/hooks/social/use-panel";
import {Loader} from "lucide-react";
import Thread from "@/features/messages/components/thread";
import Profile from "@/features/members/components/profile";

interface Props {
    children: React.ReactNode;
}

const Layout = ({children}: Props) => {
    const {parentMessageId, profileMemberId, onClose} = usePanel()
    console.log('profileMemberId', profileMemberId)
    console.log('parentMessageId', parentMessageId)

    const showPanel = !!parentMessageId || !!profileMemberId // 转boolean值


    return (
        <div className={`h-full`}>
            <Toolbar/>
            <div className={`flex h-[calc(100vh-40px)]`}>
                <Sidebar/>
                <ResizablePanelGroup
                    // 添加一个用于自动保存当前面板缩放位置的id
                    autoSaveId={'ca-workspace-layout'}
                    direction="horizontal"
                >
                    <ResizablePanel
                        defaultSize={20}
                        minSize={11}
                        className={`bg-[#5e2c5f]`}
                    >
                        <WorkspaceSidebar/>
                    </ResizablePanel>
                    {/*拖动按钮+边界线*/}
                    <ResizableHandle withHandle/>
                    <ResizablePanel minSize={20} defaultSize={80}>
                        {children}
                    </ResizablePanel>
                    {/* 有parentMessageId时显示
                    http://localhost:3000/workspace/[workspaceId]/channel/[channelId]?parentMessageId=123
                    */}
                    {showPanel && (
                        <>
                            <ResizableHandle withHandle/>
                            <ResizablePanel minSize={20} defaultSize={29}>
                                {parentMessageId ?
                                    (
                                        <Thread
                                            messageId={parentMessageId as string}
                                            onClose={onClose}
                                        />
                                    ) :
                                    profileMemberId ? (
                                            <Profile
                                                memberId={profileMemberId as string}
                                                onClose={onClose}
                                            />
                                        ) :
                                        (
                                            <div className={`flex h-full items-center justify-center`}>
                                                <Loader className={`size-5 animate-spin text-muted-foreground`}/>
                                            </div>
                                        )}
                            </ResizablePanel>
                        </>
                    )}
                </ResizablePanelGroup>
            </div>
        </div>
    );
};

export default Layout;